<template>
<!-- 新增客观题 -->
    <div class="objsubMain">
      <div class="objsubContent">
        <h3>编辑主观题</h3>
        <div class="gundongtiaotable">
          <el-table ref="multipleTable1" border stripe :data="editsubjectdatalist" tooltip-effect="dark"
            style="width: 100%" @selection-change="handleSelectionChange1"
            :header-cell-style="{ background: '#D8E4F0', color: '#2A303B', fontWeight: '500' }" >
            <el-table-column align="center" label="题型" width="120">
              <template slot-scope="scope">
                <el-select v-model="scope.row.basicQuestionTypeId" placeholder="请选择" class="selectbox fxwidth4">
                  <el-option v-for="item in questiontype" :key="item.id" :label="item.questionName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </template>
            </el-table-column> 
            <el-table-column align="center" label="题号编号">
              <template slot-scope="scope">
                <el-input v-model="scope.row.questionNumber"
                  @input="scope.row.questionNumber = onlyNumber(scope.row.questionNumber)" placeholder=""
                  class="fxwidth3" v-if="scope.row.parentQuestionNumber == 0"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="小题号">
              <template slot-scope="scope">
                <el-input v-model="scope.row.smallQuestionNumber"
                  @input="scope.row.optionCount = onlyNumber(scope.row.optionCount)" placeholder=""
                  class="fxwidth3" v-if="scope.row.parentQuestionNumber != 0"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="满分">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fullScore"
                  @input="scope.row.fullScore = onlyNumber(scope.row.fullScore)" placeholder=""
                  class="fxwidth3"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="步长">
              <template slot-scope="scope">
                <el-input v-model="scope.row.stepSize"
                  @input="scope.row.stepSize = onlyzzNumber(scope.row.stepSize)" placeholder=""
                  class="fxwidth4"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <div style="display: flex;align-items: center;justify-content: center;">
                    <el-button type="text" size="small" @click="addsmallquestion(scope.row,scope.$index)"
                    style="display: flex;align-items: center;color:#1A48DB" v-if="scope.row.parentQuestionNumber == 0">新增小题</el-button>
                  <el-button type="text" size="small" @click="deleteobjquestion(scope.$index)"
                    style="display: flex;align-items: center;color:#EC555A">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
           <div class="addquestionstbutton">
            <el-button @click="editobjectivequestionssurebc">保存</el-button>
            <el-button @click="editobjectivequestionsgoback">返回</el-button>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import {batchAddSubjective,editdeletesubject,questionlist} from '../../api/paperinfo/paperinfo.js'
export default{
  dicts: ["question_type"],
  props:['editsubjectdatalist'],
    data(){
        return{
            addobjquestion: {
                startNum: '',
                endNum: '',
                fixednum:'',
                questiontype:'',
                optiondirection:'',
                fullscore: '',
            },
            objquestionlist:[],
            questionclassifylist:[{label:'横向',value:1},{label:'纵向',value:2}],
            ontinuousnum:'1',
            questiontype:[]
        }
    },
    mounted(){
        this.getList()
       
    },
    methods:{
        //获取主观题列表
       
        getList() {
            let obj={
              examSubjectId:this.$route.query.examId
            }
            questionlist(obj)
            .then((response) => {
                this.questiontype = response.rows.filter(question => question.subjectiveType === 1);
                // this.total = response.total;
            })
            .finally(() => {
                this.loading = false;
            });
        },
       validateFixedNumInput() {
        // 只允许数字和逗号，并自动过滤非法字符
        // this.addobjquestion.fixedNum = this.addobjquestion.fixedNum.replace(/[^\d,]/g, '');
        
        // 可选：禁止连续逗号（如 `1,,2` → `1,2`）
        // this.addobjquestion.fixedNum = this.addobjquestion.fixedNum.replace(/,+/g, ',');
        
        // 可选：去除开头或结尾的逗号（如 `,1,2,` → `1,2`）
        this.addobjquestion.fixedNum = this.addobjquestion.fixedNum.replace(/^,|,$/g, '');
      },
      //添加试题
      addquestionbox(){
         // 校验题号
        if (this.ontinuousnum == 1) {
          if (!this.addobjquestion.startNum || !this.addobjquestion.endNum) {
            this.$message.error('请填写起止题号');
            return;
          }
          if (parseInt(this.addobjquestion.startNum) > parseInt(this.addobjquestion.endNum)) {
            this.$message.error('起始题号不能大于结束题号');
            return;
          }
        } else if (this.ontinuousnum == 2) {
          if (!this.addobjquestion.fixedNum) {
            this.$message.error('请填写固定题号');
            return;
          }
          // 检查固定题号格式
          if (!/^\d+(,\d+)*$/.test(this.addobjquestion.fixedNum)) {
            this.$message.error('固定题号格式不正确，请使用逗号分隔数字');
            return;
          }
        }
        
        // 校验试题题型
        if (!this.addobjquestion.questiontype) {
          this.$message.error('请选择试题题型');
          return;
        }
         let questionNumbers = [];
        if(this.addobjquestion.startNum && this.addobjquestion.endNum){
          // alert('1111')
          const startNum = parseInt(this.addobjquestion.startNum);
          const endNum = parseInt(this.addobjquestion.endNum);
          for (let i = startNum; i <= endNum; i++) {
            questionNumbers.push(i.toString());
          }
        }
        if(this.addobjquestion.fixedNum){
          // alert('2222')
          questionNumbers = this.addobjquestion.fixedNum.split(',').map(num => num.trim());
        }
        let chunkSize = 1
        for (let i = 0; i < questionNumbers.length; i += chunkSize) {
          const chunk = questionNumbers.slice(i, i + chunkSize);
          
          this.editsubjectdatalist.push({
            examId:parseInt(this.$route.query.templateId),
            questionNumber: chunk[0],
            basicQuestionTypeId:this.addobjquestion.questiontype, // 题型数组
            fullScore:'', // 满分分值
            parentQuestionNumber:0,
            smallQuestionNumber:0,
            stepSize:1
          });
        }
         console.info(this.objquestionlist)
        this.addobjquestion= {
              startNum: '',
              endNum: '',
              fixednum:'',
              questiontype:'',
              optiondirection:'',
              fullscore: '',
          }
      },
      //新增小题号
      addsmallquestion(row,index){
        console.info(row,'rows')
        if(row.questionNumber==''){
          this.$message.error('请先填写大题号')
          return
        }
        this.editsubjectdatalist.splice(index + 1, 0, {
            examTemplateId: row.examTemplateId,
            questionNumber: '',
            basicQuestionTypeId: row.basicQuestionTypeId, // 题型数组
            fullScore: '', // 满分分值
            parentQuestionNumber: row.questionNumber,
            smallQuestionNumber: '',
            stepSize:row.stepSize
        });
      },
      addsmallquestionbig(row,index){
          this.editsubjectdatalist.splice(index + 1, 0, {
            examTemplateId: parseInt(this.$route.query.templateId),
            questionNumber: '',
            basicQuestionTypeId:'', // 题型数组
            fullScore: '', // 满分分值
            parentQuestionNumber:0,
            smallQuestionNumber: '',
            stepSize:''
        });
      },
        cancelobj () {
            this.addobjquestionIshow = false
        },
        // 删除客观题行
        deleteobjquestion (index) {
            if (this.editsubjectdatalist.length > 1) {
                this.editsubjectdatalist.splice(index, 1);
                this.$message({
                type: 'success',
                message: '删除行成功!'
                });
            } else {
                this.$message({
                type: 'warning',
                message: '至少保留一行数据!'
                });
            }
        },
        // 格式化输入值
        formatInputValue (value) {
            return value === 0 ? '' : value;
        },
        onlyLetters (value) {
            return value.replace(/[^a-zA-Z,]/g, '');
        },
        onlyNumber (value) {
            return value.replace(/[^0-9.]/g, '');
        },
        onlyzzNumber(value) {
            return value.replace(/[^0-9,.]/g, ''); // 只保留数字和逗号
        },
        formatCommaSeparatedNumbers(input) {
            let cleaned = input.replace(/[^\d,]/g, '');
            cleaned = cleaned.replace(/,+/g, ',');
            cleaned = cleaned.replace(/^,|,$/g, '');
            return cleaned;
        },
        handleSelectionChange1 (val) {
            this.multipleSelection1 = val;
        },
        editobjectivequestionssurebc () {
          console.info('editsubjectdatalist',this.editsubjectdatalist)
          // return false
          batchAddSubjective(this.editsubjectdatalist).then(res => {
            if(res.code=200){
                this.$emit('updateobjectivequestionssurebc', 1)
            }else{
                this.$message({
                type: 'warning',
                message: '保存失败!'
                });
            }
          })
        },
        editobjectivequestionsgoback () {
            this.$emit('updateobjectivequestionssurebc', 0)
        }
    }
}
</script>

<style scoped>
.objsubMain {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1002;
}
.objsubContent {
  box-sizing: border-box;
  width: 1040px;
  max-height:500px;
  background: #FFFFFF;
  box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
  border-radius: 10px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 24px;
}

.objsubContent h3 {
  font-size: 18px;
  font-weight: normal;
}
.objsubattention {
  display: flex;
  font-size: 14px;
  color: #619CF5;
  padding: 10px 0 24px;
}

.gundongtiaotable {
  width: 100%;
}

.gundongtiaotable::-webkit-scrollbar {
  width: 6px;
  background-color: #eee;
  border-radius: 10px;
}

.gundongtiaotable::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 10px;
}

.gundongtiaotable::-webkit-scrollbar-thumb {
  background: #619CF5;
  border-radius: 10px;
}
.nrlist{
  display: flex;
  align-items: center;
  margin-bottom:20px;
}
.nrlist span{
  display: inline-block;
  padding-right:15px;
  width:80px;
}
.nrlis >>> .el-input{
  width:195px;
}
.nrlist >>> .el-input__inner{
  width:195px;
}
.nrlist:first-child >>> .el-input{
  width:90px;
}
.nrlist:first-child >>> .el-input__inner{
  width:90px;
}
.nrlist:first-child b{
  font-style:normal;
  padding:0 6px;
  font-weight: normal;
}
.nrlist1 b{
  display: block;
  font-weight:normal;
  padding-bottom:15px;

}
.nrlist1  >>> .el-checkbox-group{
  margin-bottom:20px;
}
.addquestionbox{
  width:278px;
  background:#1A48DB;
  text-align: center;
  line-height:30px;
  color:#fff;
  font-size:16px;
  border:none;
}
.addquestionstbutton{
  margin-top:20px;
  display: flex;
  padding-right:20px;
}
.addquestionstbutton >>> .el-button{
  width:130px;
  line-height:30px;
  font-size:16px;
  border:none;
}
.addquestionstbutton >>> .el-button:first-child{
  background:#1A48DB;
  text-align: center;
  line-height:30px;
  color:#fff;
}
.addquestionstbutton >>> .el-button:last-child{
  background:rgba(26, 72, 219, 0.1);
  text-align: center;
  line-height:30px;
  color:#1A48DB;
}
.custom-table {
  width: 100%;
  border: 1px solid rgba(216, 228, 240, 0.5);
  border-radius: 4px;
  border-right: none;
  border-bottom: none;
}

/* 自定义表格内部元素的样式 */
.custom-table>>>.el-table__header-wrapper th {
  background-color: #E8F0FA;
  height: 42px;
  padding: 0;
  text-align: center;
  font-weight: normal
}

.custom-table>>>.el-table__row td {
  height: 42px;
  padding: 0;
  text-align: center;
  border-bottom: none;
  border-right: solid 1px rgba(216, 228, 240, 0.34);
  font-size: 14px;
}

.el-table .warning-row {
  background: #ffffff;
}

.el-table .success-row {
  background: #D8E4F0;
}

.el-table .el-table__cell {
  padding: 8px 0;
}
.fxwidth {
  font-size: 14px;
  color: #2A303B;
}

.fxwidth>>>.el-input__inner {
  width: 130px;
  height: 30px;
  background: #F2F6FB;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
  padding: 0;
  text-align: center;
}
.fxwidth1 {
  font-size: 14px;
  color: #2A303B;
}

.fxwidth1 >>> .el-input__inner {
  box-sizing: border-box;
  width: 200px;
  height: 30px;
  background: #F2F6FB;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
  padding: 0;
  text-align: left;
  padding-left:10px;
}
.fxwidth2{
  font-size: 14px;
  color: #2A303B;
}

.fxwidth2 >>> .el-input__inner {
  box-sizing: border-box;
  width: 281px;
  height: 30px;
  background: #F2F6FB;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
  padding: 0;
  text-align: left;
  padding-left:10px;
}
.fxwidth3{
  font-size: 14px;
  color: #2A303B;
}

.fxwidth3 >>> .el-input__inner {
  box-sizing: border-box;
  width: 35px;
  height: 30px;
  background: #F2F6FB;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
  padding: 0;
  text-align: center;
}
.fxwidth4{
  font-size: 14px;
  color: #2A303B;
}

.fxwidth4 >>> .el-input__inner {
  box-sizing: border-box;
  width: 80px;
  height: 30px;
  background: #F2F6FB;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
  padding: 0;
  text-align: left;
  padding-left:10px !important;
}
.fxwidth4 >>> .el-input__icon {
  line-height:30px;
}
</style>